<!--
 * @Author: g05047
 * @Date: 2022-02-18 18:09:37
 * @LastEditors: g05047
 * @LastEditTime: 2022-02-23 14:09:40
 * @Description: file content
-->
<template>
  <div class="singlePerson-page">
    <h2>个人信息首页</h2>
    <div class="person-info" v-if="personInfo">
      <el-row>
        <b style="font-size: 16px">基本信息</b>
      </el-row>
      <el-row>
        <el-col :span="5">
          <span>姓名：{{ personInfo.thename }}</span>
        </el-col>
        <el-col :span="5">
          <span>性别：{{ personInfo.sex }}</span>
        </el-col>
        <el-col :span="5">
          <span>身份证号：{{ personInfo.pdabh }}</span>
        </el-col>
        <el-col :span="9"> </el-col>
      </el-row>

      <el-row>
        <el-col :span="5">
          <span>出生日期：{{ personInfo.datebirth }}</span>
        </el-col>
        <el-col :span="5">
          <span>手机号码：{{ personInfo.mobile }}</span>
        </el-col>
        <el-col :span="5">
          <span>
            健康码：
            <label
              :class="
                personInfo.licensenumber.indexOf('无') !== -1 ? 'green' : 'red'
              "
            >
              {{ personInfo.licensenumber }}
            </label>
          </span>
        </el-col>
        <el-col :span="9"> </el-col>
      </el-row>

      <el-row>
        <el-col :span="5">
          <span>
            行程码：
            <label
              :class="
                personInfo.entrytime.indexOf('无') !== -1 ? 'green' : 'red'
              "
              >{{ personInfo.entrytime }}
            </label>
          </span>
        </el-col>
        <el-col :span="5">
          <span>新冠疫苗：{{ personInfo.vaccination }}</span>
        </el-col>
        <el-col :span="5">
          <span>
            接种日期：{{
              personInfo.vaccinationdate === ""
                ? "--"
                : personInfo.vaccinationdate
            }}
          </span>
        </el-col>
        <el-col :span="9"> </el-col>
      </el-row>

      <el-row>
        <el-col :span="5">
          <span>添加日期：{{ personInfo.createTime }}</span>
        </el-col>
        <el-col :span="10">
          <span>
            最新核酸采样情况：
              {{ personInfo.sampleCollectTime||'--' }}
          </span>
        </el-col>

        <el-col :span="9"> </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
           <span>员工状态：</span>  <span v-if="personInfo.personStatus==1" class="green">在岗</span>
          <span v-else class="red">离岗</span>
        </el-col>
        <el-col :span="12">
          <span>
            工作单位：[{{ personInfo.bodyindustry }}]{{ personInfo.unitName }}
          </span>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-row>
        <b style="font-size: 16px">核酸采集填报列表</b>
      </el-row>
      <el-row :gutter="10" style="margin: 20px 0px">
        <el-col :span="25">
          <el-date-picker
            v-model="selectedDate"
            type="daterange"
            size="small"
            range-separator="—"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="handelChangeDate"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="4">
          <el-select
            size="small"
            v-model="queryParam.status"
            placeholder="核酸采样填报"
            clearable
          >
            <el-option
              v-for="item in collectionOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
          <el-col :span="3">
        <el-select
          v-model="queryParam.samplingTypeStr"
          :clearable="false"
          size="small"
        >
          <el-option label="数据来源" value="0"></el-option>
          <el-option label="手工填报" value="1"></el-option>
          <el-option label="系统同步" value="2"></el-option>
        </el-select>
      </el-col>
        <el-col :span="5" class="btn">
          <el-button type="primary" size="small" @click="handleQuery">
            查询
          </el-button>
          <el-button
            size="small"
            @click="handelExport"
            :loading="exportLoading"
          >
            导出
          </el-button>
        </el-col>
      </el-row>

      <!-- 采样表格数据 -->
      <el-table border stripe :data="tableData" style="width: 100%">
        <el-table-column
          prop="planneddate"
          label="计划日期"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
      <el-table-column
        prop="samplingType"
        label="数据来源"
        align="center"
        width="140px"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.samplingTypeStr == 2||scope.row.samplingTypeStr==3" class="green">
            {{ scope.row.samplingType }}
          </div>
          <div v-else-if="scope.row.actualdate == ''">--</div>
          <div v-else>{{ scope.row.samplingType }}</div>
        </template>
      </el-table-column>
        <el-table-column
          prop="actualdate"
          label="采样日期"
          align="center"
          show-overflow-tooltip
          width="170px"
        >
        </el-table-column>
        <el-table-column
          prop="samplingpoint"
          label="采样点"
          align="center"
          show-overflow-tooltip
          width="150px"
        >
          <template slot-scope="scope">
            <span>
              {{
                scope.row.samplingpoint === "" ? "--" : scope.row.samplingpoint
              }}
            </span>
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="streetName"
          label="采样区域街道"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column> -->
        <el-table-column
          prop="informantTime"
          label="填报日期"
          align="center"
          width="180"
          show-overflow-tooltip
        >
          >
          <template slot-scope="scope">
            <span>
              {{
                scope.row.informantTime === "" ? "--" : scope.row.informantTime
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="informant"
          label="填报者"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>
              {{ scope.row.informant === "" ? "--" : scope.row.informant }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="核酸采样填报"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span
              :class="scope.row.status.indexOf('如期') !== -1 ? 'green' : 'red'"
            >
              {{ scope.row.status }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="reasondelay"
          label="延期原因"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>
              {{ scope.row.reasondelay === "" ? "--" : scope.row.reasondelay }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="smsReminderTotal"
          label="短信提醒"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button size="mini" @click="handelView(scope.row)">
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 采样分页 -->
      <el-pagination
        style="float: right; margin-top: 20px"
        @current-change="changeCurrentPage"
        :page-size="queryParam.pageSize"
        background
        layout="total, prev, pager, next"
        :total="listTotal"
        v-if="listTotal > 0"
      >
      </el-pagination>
    </div>

    <el-dialog
      width="50%"
      append-to-body
      :close-on-click-modal="false"
      :show-close="true"
      :destroy-on-close="true"
      :visible.sync="singleCollectionDialog"
    >
      <SingleCollectionInfo :personCollectionInfo="singeCollectionInfo" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="singleCollectionDialog = false"> 关 闭 </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import SingleCollectionInfo from "@/views/coldLink/collectionInfo/singleCollectionInfo.vue";

export default {
  components: {
    SingleCollectionInfo,
  },
  props: {
    personInfo: {
      Type: Object,
    },
  },
  data() {
    return {
      // personInfo: {}, //人员信息
      selectedDate: [], //查询日期
      collectionOptions: [
        { label: "如期填报", value: 1 },
        { label: "延期补录", value: 2 },
        { label: "延期异常", value: 0 },
      ], //核酸采样状态

      queryParam: {
        // areaCode: "", //区域编码
        // bodyindustry: "", //主体业态
        endDateCompletion: "", //结束时间(采样时间)
        startDateCompletion: "", //开始时间(采样时间)
        pageIndex: 1, //开始页码
        pageSize: 10, //每页记录条数
        searchOne: "", //搜索(人员姓名/手机号码)
        // searchTwo: "", //搜索(单位名称/社会信用代码)
        status: "", //核酸采样填报 采样状态 0 未采样1如期采样 2延期补录 默认-1 0延期异常
        id:"", 
        samplingTypeStr:"0"
      }, //采样记录列表查询参数
      exportLoading: false, //导出状态

      tableData: [], //表格数据
      listTotal: 0, //列表总条数

      singleCollectionDialog: false, //单条采样记录dialog
      singeCollectionInfo: {}, //单条采样记录
    };
  },
  created() {
    // if (this.$route.params.personInfo) {
    //   sessionStorage.setItem(
    //     "PERSON_INFO",
    //     JSON.stringify(this.$route.params.personInfo)
    //   );
    // }
    // this.personInfo = JSON.parse(sessionStorage.getItem("PERSON_INFO"));

    this.selectedDate = [
      this.$moment().subtract(6, "days").format("YYYY-MM-DD"),
      this.$moment().format("YYYY-MM-DD"),
    ];
    this.queryParam.startDateCompletion = this.selectedDate[0];
    this.queryParam.endDateCompletion = this.selectedDate[1];

    // this.getCollectionList();
  },
  mounted() {},
  methods: {
    //选择时间
    handelChangeDate() {
      console.log(this.selectedDate);
      this.queryParam.startDateCompletion = this.selectedDate[0];
      this.queryParam.endDateCompletion = this.selectedDate[1];
    },

    //查询
    handleQuery() {
      this.getCollectionList();
    },

    //导出
    handelExport() {
      let params = JSON.parse(JSON.stringify(this.queryParam));

      // params.searchOne = this.personInfo.thename;
params.pid = this.personInfo.id;
      if (params.status === "") {
        params.status = -1;
      }

      this.$http.exportCollectionList(params).then((res) => {
        var blob = new Blob([res], {
          type: "application/vnd.ms-excel;charset=utf-8",
        });
        var downloadElement = document.createElement("a");
        var href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download =
          this.personInfo.thename +
          "_核酸采集填报列表_" +
          new Date().getTime() +
          ".xlsx"; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
      });
    },

    //查看
    handelView(row) {
      console.log("查看", row);

      this.singeCollectionInfo = row;

      this.singleCollectionDialog = true;
    },

    //分页
    changeCurrentPage(val) {
      this.queryParam.pageIndex = val;
      this.getCollectionList();
    },

    //获取采样列表
    getCollectionList() {
      console.log("采样请求参数", this.personInfo);
      let params = JSON.parse(JSON.stringify(this.queryParam));
      // params.searchOne = this.personInfo.thename;
      params.pid = this.personInfo.id;
      if (params.status === "") {
        params.status = -1;
      }

      this.$http.getCollectionList(params).then((res) => {
        console.log("采样列表请求", res);
        const { code, data, msg } = res;
        if (code === 200) {
          this.tableData = data.list;
          this.listTotal = data.total;
        } else {
          this.$message.error(msg);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.singlePerson-page {
  // padding: 10px 20px;
  padding-bottom: 25px;
  .person-info {
    margin-bottom: 20px;
    span {
      display: inline-block;
      margin-top: 10px;
    }
  }
  // .btn {
  //   display: flex;
  //   justify-content: flex-end;
  // }
  .red {
    color: red;
  }
  .green {
    color: green;
  }
}
</style>
